<template>
    <el-cascader
            :size="size"
            :options="autoCascaderData[dataType]"
            clearable
            filterable
            :change-on-select="changeOnSelect"
            :value="value"
            @change="change"
    ></el-cascader>
</template>
<script>
    import {mapState} from 'vuex'

    export default {
        name: 'autoCascaderForm',
        data() {
            return {
                value: (this.defaultValue || [])
            }
        },
        props: {
            dataType: String,
            fieldName: String,
            selectCb: Function,
            defaultValue: {},
            changeOnSelect: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: 'mini'
            }
        }
        ,
        computed: {
            ...
                mapState({
                    autoCascaderData: function (state) {
                        if (!state.common.autoCascaderData[this.dataType]) {
                            return {
                                [this.dataType]: []
                            }
                        }
                        return state.common.autoCascaderData
                    }
                })
        }
        ,
        methods: {
            change(value) {
                this.$emit('selectCb', {
                    fieldName: this.fieldName,
                    value: value
                })
            }
        }
        ,
        created() {
            if (!this.autoCascaderData[this.dataType] || this.autoCascaderData[this.dataType].length === 0) {
                this.$store.dispatch('common/getAutoCascaderData', {
                    dataType: this.dataType
                })
            }
        },
        watch: {
            defaultValue: function (n) {
                this.value = n ? n : []
            }
        }
    }
</script>
